<template>
	<view class=" flex flex-y-center text-center gap-8 fs-18 ">
		<view class="flex-1 round-8  py-11" @click="onChange(item)" :class="{
							  'gradient':modelValue == item.value,
							  'bg-black-1': modelValue != item.value
							}" v-for="(item,index) in list" :key='index'>
			{{item.label}}
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		modelValue: {
			type: [Number, String],
			default: ''
		},
		list: {
			type: [Object, Array],
			default: []
		}
	})
	const emit = defineEmits(['onChange', 'update:modelValue'])
	const onChange = (e) => {
		emit('update:modelValue', e.value);
		emit('onChange', e.value);
	}
</script>

<style>
</style>